<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="./css/detail.css">
    <link rel="stylesheet" href="./lib/fa/css/font-awesome.min.css">
    <link rel="stylesheet" href="./lib/swiper/css/swiper.min.css">
    <title>详情页</title>
</head>
<body>
    <div class="detail-layout jd_container">
        <!-- 头部 -->
        <div class="detail-header jd_header">
            <a href="#" class="back icon_left"></a>     
            <h4 class="title">详情</h4>      
            <a href="#" class="menu icon_right"></a>                       
        </div>
        <!-- banner -->
        <div class="swiper-container">
                <div class="swiper-wrapper">
                    <div class="swiper-slide">
                        <img src="./images/detail1.jpg" alt="">
                    </div>
                    <div class="swiper-slide">
                        <img src="./images/detail1.jpg" alt="">
                    </div>
                    <div class="swiper-slide">
                        <img src="./images/detail1.jpg" alt="">
                    </div>
                </div>
                <!-- 如果需要分页器 -->
                <div class="swiper-pagination"></div>  
        </div>    
        <div class="detail-banner">
            <img src="./images/newYear.jpg" alt="">
        </div>    
        <!-- 商品描述  -->
        <div class="detail-info">
            <p>
                <img class="zy" src="./images/zy.png" alt="">
                Tsful 帽子女冬季新款时尚纯色保暖护耳针织毛线帽子 GC3033MZE 繁星藏青
            </p>
            <a href="#" class="fa fa-heart-o">
                关注
            </a>
        </div>
        <div class="detail-price">
            <span class="money">￥99.99</span>
            <span class="down">降价通知</span>
        </div>
        <div class="detail-select">
            <div class="color">
                <h5>颜色</h5>
                <div class="clearfix">
                    <span>酒红色</span>
                    <span>藏青色</span>
                    <span>黑色色</span>
                    <span>粉色</span>
                    <span>繁星藏青</span>
                    <span>夹色灰色</span>
                    <span>夹色酒红</span>
                    <span>原谅色</span>
                </div>
            </div>
            <div class="num">
                <h5>数量</h5>
                <div class="add">
                    <span>-</span>
                    <span>1</span>
                    <span>+</span>
                </div>
            </div>
        </div>
        <!-- 地址 -->
        <div class="detail-address">
            <div class="path">
                <span>送至</span>
                <div class="text">
                    <p>北京朝阳区三环到四环之间</p>
                    <p><span class="now">现货</span>23:00前下单,预计明天(01月12日)送达</p>
                </div>
                <div class="img">
                        <img src="./images/more.png" alt="">
                </div>
            
            </div>
            <div class="weight">
                重量：<span>0.1kg</span>
            </div>
        </div>
        <!-- 评价 -->
        <div class="detail-comment">
            <div class="com-title">
                <div class="left">
                    评价
                    <span>好评 99%</span>
                </div>
                <div class="right">共 6200 +条</div>
            </div>
            <div class="com-list">
                <div class="item">
                    <div class="user">
                        <span>j****a</span>
                        <span class="start"></span>
                    </div>
                    <p class="text">质量很好，带着也很好看，很喜欢</p>
                    <div class="list clearfix">
                        <img src="./images/detail1.jpg" alt="">
                        <img src="./images/detail2.jpg" alt="">
                        <img src="./images/detail3.jpg" alt="">
                    </div>
                </div>
                <div class="item">
                    <div class="user">
                        <span>j****a</span>
                        <span class="start"></span>
                    </div>
                    <p class="text">质量很好，带着也很好看，很喜欢</p>
                    <div class="list clearfix">
                        <img src="./images/detail1.jpg" alt="">
                        <img src="./images/detail2.jpg" alt="">
                        <img src="./images/detail3.jpg" alt="">
                    </div>
                </div>
                <div class="item">
                    <div class="user">
                        <span>j****a</span>
                        <span class="start"></span>
                    </div>
                    <p class="text">质量很好，带着也很好看，很喜欢</p>
                    <div class="list clearfix">
                        <img src="./images/detail1.jpg" alt="">
                        <img src="./images/detail2.jpg" alt="">
                        <img src="./images/detail3.jpg" alt="">
                    </div>
                </div>
                <div class="item">
                    <div class="user">
                        <span>j****a</span>
                        <span class="start"></span>
                    </div>
                    <p class="text">质量很好，带着也很好看，很喜欢</p>
                    <div class="list clearfix">
                        <img src="./images/detail1.jpg" alt="">
                        <img src="./images/detail2.jpg" alt="">
                        <img src="./images/detail3.jpg" alt="">
                    </div>
                </div>
            </div>
            <p class="com-all">查看全部评价</p>    
        </div>
        <!-- 商品介绍 -->
        <div class="detail-introduce">
           <div class="title">
               <span>商品介绍</span>
               <span>规格参数</span>
               <span>售后保障</span>
           </div>
            <div class="content">
                <img src="./images/d1.jpg" alt="">
                <img src="./images/d2.jpg" alt="">
                <img src="./images/d3.jpg" alt="">
                <img src="./images/d4.png" alt="">
                <img src="./images/d5.png" alt="">
                <img src="./images/d6.png" alt="">
                <img src="./images/d7.png" alt="">
                <img src="./images/d8.png" alt="">
            </div>
        </div>
        <div class="detail-footer jd_footer">
            <div class="icon">
                <span class="server">客服</span>
                <span class="shop">进店</span>
                <span class="cart">购物车</span>
            </div>
            <div class="cart">加入购物车</div>
            <div class="buy">立即购买</div>
        </div>

    </div>

    <script src="./lib/swiper/js/swiper.js"></script>
    <script>
          var mySwiper = new Swiper ('.swiper-container', {        
            loop: true,            
            // 如果需要分页器
            pagination: '.swiper-pagination'

        })      
    </script>
</body>
</html>